<template>
	<view>
		<view class="user">
			<view class="imgclass">
			<image src="/static/logo.png" mode="heightFix" class="img" ></image>
			</view>
			<view class="user">
				<u--form 		:errorType="errorType"
								labelPosition="left"
								:model="userInfo"
								:rules="rules"
								ref="user"
						>
							<u-form-item
									label="姓名"
									prop="username"
									borderBottom
									ref="item1"
									required
									clear
							>
								<u--input
										v-model="userInfo.username"
										border="none"
										clearable
								></u--input>
							</u-form-item>
							<u-form-item
									label="密码"
									prop="password"
									borderBottom
									ref="item1"
									required
							>
								<u--input
										v-model="userInfo.password"
										border="none"
										type="password"
										clearable
								></u--input>
							</u-form-item>
				</u--form>
			</view>
			<view class="buttonclass">
				<button type="primary" @click="login" class="">{{usertype?'登录':'注册'}}</button>
				<button type="default" @click="reduce" class="">重置</button>
			</view>
			<view class="bootem">
				<text class="forget">忘记密码?</text>
				<text class="regintion" @click="regintion">{{usertype?'去注册':'去登录'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType:'toast',
				userInfo:{
					username:'',
					password:''
				},
				rules:{
					username:[
					{
						required: true,
						min:2,
						max:8,
						message: '请输入2~8位的昵称',
						trigger: ['blur', 'change']
					}
				],
				password:[
					{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					{
						validator:(rule, value, callback) => {
						let regx =/^\w{6,21}$/g
					let boole = regx.test(value)
					console.log(boole,'boole');
							if(!boole){
								// uni.showToast({title:'请输入6~21位字母和数字组合得密码',icon:'error'})
								callback(new Error('请输入6~21位字母和数字组合得密码'))
							}
						},
						trigger: ['change','blur'],
					}
				]
				},
				usertype:true //当前的模式，是true代表登录，false代表注册
			};
		},
		methods:{
			login(){
				this.$refs.user.validate().then(res=>{
					//如果为true代表点击的是登录，否则代表点击的是注册
					if(this.usertype){
						this.$store.dispatch('user/savetokenRequest',this.userInfo)
					}else{
						this.$store.dispatch('user/regintion',this.userInfo)
					}
				})
			},
			//重置
			reduce(){
				this.$refs.user.resetFields()
				
			},
			//点击去注册
			regintion(){
				this.usertype = !this.usertype
				this.$refs.user.resetFields()
			}
		}
	}
</script>

<style lang="scss">
	.imgclass{
		display: flex;
		justify-content: center;
		margin-top: 150rpx;
		.img{
			width: 200rpx;
			height: 200rpx;
		}
	}
.user{
	margin: 20px;
}
.buttonclass{
	display: flex;
	justify-content: center;
	button{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0px 20rpx !important;
	}
}
.bootem{
	margin-top: 20rpx;
	font-size: 12px;
	display: flex;
	justify-content: center;
	text{
		width: 200rpx;
		margin: 0px 20rpx;
		text-align: center;
		
	}
	.regintion{
		color: coral !important;
	}
	.forget{
		color: orangered;
	}
}
</style>
